<template>
  <el-dropdown>
    <div class="el-dropdown-link">
      <el-avatar>{{ userName }}</el-avatar>
      <span class="user-name">{{ userName }}</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>退出登录</el-dropdown-item>
        <el-dropdown-item divided>个人信息</el-dropdown-item>
        <el-dropdown-item>修改密码</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { useStore } from "@/store";
export default defineComponent({
  setup() {
    const store = useStore();
    const userName = store.state.loginModule.userInfo.name;
    return {
      userName,
    };
  },
});
</script>

<style lang="less" scoped>
.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  .user-name {
    margin-left: 8px;
  }
}
</style>
